<template>
	<view class="savepadding">
		<uni-list>
			<view class="item" style="padding: 0;" v-for="(item, index) in listData" :key="index">
				<u-form ref="uform" label-width="auto">
					<u-form-item label="维修项目名称" borderBottom>
						<u-input v-model="item.itemName" type="text" maxlength="20" inputAlign="right" border="none" placeholder="请输入维修项目名称">
						</u-input>
					</u-form-item>
					<u-form-item label="金额/元" borderBottom>
						<u-input :ref="index" v-model="item.itemMoney"  maxlength="10" type="digit" inputAlign="right" border="none" placeholder="请输入金额">
						</u-input>
					</u-form-item>

				</u-form>

				<text v-if="index != 0" class="delete" @click="deletItem(index)">删除</text>
			</view>
			<view style="margin: 20rpx; padding-bottom: 130rpx;">
				<button class="list-add" @click="addMaintain">+继续添加</button>
			</view>
		</uni-list>
		<view class="bottom">
			<button class="bottom-add" @click="save">保存</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [{
					itemName: '',
					itemMoney: '',
				}]
			}
		},

		onLoad(options) {
			var data = JSON.parse(options.repairItemInfoList); //字符串转对象
			if (data.length > 0) {
				this.listData = data;
			}
		},
		mounted() {
			this.refItemMoney()
		},
		methods: {
			refItemMoney(){
				let that = this
				that.$nextTick(function(){
					setTimeout(()=>{
						that.listData.map((item,index)=>{
							that.$refs[index][0].setFormatter((e)=>{
								return e.replace(/[^\d.]/g, "").replace(/\.{2,}/g, ".").replace(/^(-)*(\d+)\.(\d\d).*$/,'$1$2.$3')
							})
						})
					},1000)
				})
				
			},
			//添加新的维修项目明细
			addMaintain() {
				let obj = {
					itemName: '',
					itemMoney: '',
				}
				this.listData.push(obj);
				this.refItemMoney()
			},

			deletItem(index) {
				this.listData.splice(index, 1);
				this.refItemMoney()
			},

			//保存
			save() {
				//获取所有页面的栈实例列表
				let pages = getCurrentPages();
				//当前页面
				let nowPage = pages[pages.length - 1];
				//上个页面
				let prevPage = pages[pages.length - 2];
				this.listData = this.listData.filter(
					item => {
						return (item.itemName && item.itemMoney);
					}
				)
				let str = '已添加' + this.listData.length.toString() + '项';
				prevPage.$vm.repairItemInfoList = this.listData;
				prevPage.$vm.maintenanceTypeStr = str;
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.list-add {
		line-height: 88rpx;
		border-radius: 8rpx;
		background-color: rgba($color: #1573FF, $alpha: 0.26);
		color: #1573FF;
	}

	.u-form {
		margin: 10px;
		padding: 22rpx;
		background-color: $xz-bgColor-write;
	}

	.delete {
		display: flex;
		color: $xz-textColor-red;
		font-size: 24rpx;
		justify-content: flex-end;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		color: $xz-textColor-FF;

	}

	.bottom-add {
		width: 90%;
		line-height: 88rpx;
		border-radius: 44rpx;
		background-color: $xz-bgColor-blue;
		color: $xz-textColor-FF;
		font-size: 30rpx;
		margin: 11rpx;

	}
</style>
